<template>
  <div class="header">
    <el-menu
      class="header-menu"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
        
        <div class="left-section">
          <div class="logo-container">
            <img src="@/assets/img/logo.png" alt="logo" class="logo">
            <span class="system-name">招聘管理系统</span>
          </div>
          <el-icon class="fold-btn" @click="toggleSidebar" style="width: auto;">
          <Fold v-if="!isCollapse"/>
          <Expand v-else/>
        </el-icon>
        </div>


      <div class="right-section">
 
        <el-tooltip content="全屏" placement="bottom">
          <el-icon class="header-icon" @click="toggleFullScreen">
            <FullScreen />
          </el-icon>
        </el-tooltip>

     
        <el-badge :value="count" class="notice-badge">
          <el-icon class="header-icon">
            <Bell />
          </el-icon>
        </el-badge>

 
        <el-dropdown trigger="click" @command="handleCommand">
          <div class="user-info">
            <el-avatar :size="30" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"/>
            <span class="username">{{admin.username}}</span>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="profile">个人信息</el-dropdown-item>
              <el-dropdown-item command="security">账号安全</el-dropdown-item>
              <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-menu>
  </div>
</template>

<script setup>
import { ElMessageBox } from 'element-plus'
import { inject,onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import { useAdminStore } from '@/store/modules/admin'
import {getPendResume} from '@/api/resume'
import {ref,onMounted} from 'vue'
import eventBus from '@/utils/eventBus'
const count=ref(0)
const admin=JSON.parse(localStorage.getItem('admin'))
const adminStore=useAdminStore()
const router=useRouter();
const emit=defineEmits(['toggle-sidebar'])
const isCollapse=inject('isCollapse')
const toggleSidebar=()=>{
  emit('toggle-sidebar',!isCollapse.value)
}
const toggleFullScreen=()=>{
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen()
  } else {
    document.exitFullscreen()
  }
}
const getPendResumes = async () => {
   const res=await getPendResume();
   count.value=res.data
}

const handleCommand=(command)=>{
  switch(command){
    case 'logout':
      ElMessageBox.confirm('确认退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        adminStore.removeToken()
        adminStore.removeAdminInfo()
        localStorage.removeItem('adminToken')
        localStorage.removeItem('admin')
        router.push('/admin/login')
      })
      break;
      case 'profile':
        router.push('/admin/profile')
        break;
      case 'security':
        router.push('/admin/security')
        break;
  }
}

onMounted(()=>{
  getPendResumes()
  eventBus.on('updatePendingCount', async () => {
    await getPendResumes()
  })
})

onUnmounted(() => {
  eventBus.off('updatePendingCount')
})
</script>

<style scoped>
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
 
}

.header-menu {
  display: flex;
  justify-content: space-between;
  height: 60px;
  padding: 0 20px;
}

.left-section {
  display: flex;
  align-items: center;
}

.logo-container {
  display: flex;
  align-items: center;
  margin-right: 20px;
}

.logo {
  height: 32px;
  margin-right: 10px;
  border-radius: 50%;
}

.system-name {
  font-size: 18px;
  color: #fff;
  font-weight: bold;
}

.fold-btn {
  font-size: 20px;
  color: #fff;
  cursor: pointer;
  padding: 0 10px;
}

.right-section {
  display: flex;
  align-items: center;
  gap: 20px;
}

.header-icon {
  font-size: 20px;
  color: #fff;
  cursor: pointer;
  padding: 0 10px;
}

.notice-badge {
  margin-right: 10px;
}

.user-info {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.username {
  color: #fff;
  margin-left: 8px;
}

:deep(.el-dropdown-menu__item) {
  padding: 8px 20px;
}
</style>